<template>
  <echarts echart-id="dynamic" :option="option"></echarts>
</template>

<script setup>
import echarts from '../index.vue';

const props = defineProps({
  title: {
    type: Object,
    default: () => {}
  },
  tooltip: {
    type: Object,
    default: () => {}
  },
  grid: {
    type: Object,
    default: () => {}
  },
  legend: {
    type: Object,
    default: () => {}
  },
  xAxis: {
    type: Object,
    default: () => {}
  },
  yAxis: {
    type: Object,
    default: () => {}
  },
  series: {
    type: Array,
    default: () => []
  },
  animation: {
    type: Object,
    default: () => {}
  }
});

const option = computed(() => {
  return {
    title: {
      textStyle: {
        color: '#fff'
      },
      ...props.title
    },
    grid: {
      containLabel: true,
      bottom: '4%',
      left: '4%',
      top: '10%',
      ...props.grid
    },
    tooltip: {
      show: false,
      ...props.tooltip
    },
    xAxis: {
      max: 'dataMax',
      axisLine: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      },
      ...props.xAxis
    },
    yAxis: {
      type: 'category',
      inverse: true,
      animationDuration: 300,
      animationDurationUpdate: 300,
      axisLine: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        textStyle: {
          color: '#ffffff'
        }
      },
      ...props.yAxis
    },
    series: props.series,
    legend: {
      show: true,
      textStyle: {
        color: '#fff3c9',
        fontSize: 14
      },
      ...props.legend
    },
    animationDuration: 0,
    animationDurationUpdate: 3000,
    animationEasing: 'linear',
    animationEasingUpdate: 'linear',
    ...props.animation
  };
});
</script>
